import React, { Component } from 'react'
import axios from 'axios'
import { NavBar } from 'antd-mobile';
import './index.scss'

export default class CityList extends Component {
    state = {
        ctiyList: []
    }
    // 获取城市列表数据并处理数据
    getCityList = async () => {
        let obj = {}
        let CtiyIndex = []
        let res = await axios({ url: "http://localhost:8080/area/city?level=1" })
        console.log(res.data);
        if (res.data.status === 200) {
            //    this.setState({ctiyList:res.data.body})
            res.data.body.forEach(item => {
                if (obj[item.short.substr(0, 1)]) {
                    obj[item.short.substr(0, 1)] = [...obj[item.short.substr(0, 1)], item]
                } else {
                    obj[item.short.substr(0, 1)] = [item]
                }
            })
            CtiyIndex = Object.keys(obj).sort()
        }
        console.log({ CtiyIndex, obj });
        return { CtiyIndex, obj }
    }
    componentDidMount() {
        this.getCityList()
    }
    render() {
        return (
            <div className="ctiyList">
                <NavBar
                    mode="light"
                    icon={<i className="iconfont icon-back" />}
                    onLeftClick={() => this.props.history.go(-1)}
                >城市列表</NavBar>
            </div>
        )
    }
}
